//************ card *****************
.card-container {
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    box-sizing: border-box;
    background-color: #fff;

    .header {
        display: flex;

        .icon {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            background-image: url(./images/通知.png);
            background-size: contain;
            border-radius: 12px;
        }


        .headline {
            flex: 1;
            margin: 0 20px;
            overflow: hidden;

            .title {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 4px;
                font-size: 30px;
                color: #000000;
            }


            .subtitle {
                font-size: 22px;
                color: #cccccc;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

        .option-btn {
            flex-shrink: 0;
            margin-top: 17px;
            width: 38px;
            height: 8px;
            background-image: url(./images/更多.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
    }


    .card-content {
        flex: auto;
        font-size: 24px;
        margin-bottom: 24px;
        color: #999999;
        display: -webkit-box;
        // 文本超过次行数时，就会触发溢出隐藏
        -webkit-line-clamp: 3;
        // 选用的对齐方式（这里用到的是垂直对齐）
        -webkit-box-orient: vertical;
        overflow: hidden;
        // max-height: 105px;
    }

    .footer {
        display: flex;
        text-align: start;
        font-size: 28px;
    }

    .status{
      text-align: start;
    }

    .unRead-count{
        color: #ff6600;
    }
    .read-count{
        // margin-left: 16px;
        color: #009900;
        margin-left: 30px;
    }

    .unread{
        flex: auto;
    }

    .read {
        color:#090;
    }

    .unread {
        color: #0099ff;
    }
}

